<template>
  <div class="f-container">
    <div v-loading="sendLoading">
      <mix-add ref="mixadd" :crmType="crmType" :id="id" @mixadd-info="submitInfo" />
      <flexbox class="se-section">
        <div class="se-name">记录类型</div>
        <el-dropdown style="margin-right: 20px" trigger="click" @command="handleTypeDrop">
          <flexbox class="se-select">
            <div class="se-select-name">{{ followType ? followType : "请选择" }}</div>
            <i class="el-icon-arrow-down el-icon--right" style="color: #ccc"></i>
          </flexbox>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in followTypes" :key="index" :command="item.type">
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <template v-if="logType != 'deputy_type'">
          <div class="se-name">下次联系时间</div>
          <el-date-picker class="se-datepicker" v-model="next_time" type="datetime" placeholder="选择日期"
            :default-value="new Date()" value-format="yyyy-MM-dd HH:mm:ss" :editable="false">
          </el-date-picker>
          <el-checkbox v-model="is_event">添加到日程提醒</el-checkbox>
        </template>
        <el-button @click.native="sendInfo" class="se-send" type="primary">
          发布
        </el-button>
      </flexbox>
    </div>
    <div class="log-cont">
      <flexbox style="border-bottom: 1px solid #e6e6e6">
        <flexbox v-for="(item, index) in logTypes" :key="index" style="width: auto"
          @click.native="logTabsClick(item, index)">
          <div class="log-tabs-item" :style="{ color: logType == item.type ? '#F18C70' : '#777' }">
            {{ item.name }}
          </div>
          <div class="log-tabs-line" v-if="logTypes.length - 1 != index"></div>
        </flexbox>
      </flexbox>
      <keep-alive>
        <component :is="componentsName" :id="id" :crmType="crmType" :logType="logType" :type="logType"
          :canEdit="canEdit" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import MixAdd from "../../components/MixAdd";
  import RecordLog from "../../components/followLog/RecordLog"; // 跟进记录
  import JournalLog from "../../components/followLog/JournalLog"; // 日志列表
  import ExamineLog from "../../components/followLog/ExamineLog"; // 审批列表
  import TaskLog from "../../components/followLog/TaskLog"; // 任务日志列表
  import ScheduleLog from "../../components/followLog/ScheduleLog"; // 日程日志列表
  import {
    crmRecordSave,
    crmRecordIndex,
    crmPostDeputy,
  } from "@/api/customermanagement/common";
  import {
    formatTimeToTimestamp
  } from "@/utils";
  import followLogType from "@/views/customermanagement/mixins/followLogType";

  export default {
    /** 客户管理 的 订单详情 的 跟进记录*/
    name: "contract-follow",
    components: {
      MixAdd,
      RecordLog,
      JournalLog,
      ExamineLog,
      TaskLog,
      ScheduleLog,
    },
    mixins: [followLogType],
    watch: {},
    props: {
      /** 模块ID */
      id: [String, Number],
      /** 没有值就是全部类型 有值就是当个类型 */
      crmType: {
        type: String,
        default: "",
      },
      // 是否可编辑
      canEdit: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        sendLoading: false,
        /** 下次联系时间 */
        next_time: "",
        /** 是否添加日程提醒 */
        is_event: false,
        logType: "record_type",
        logTypes: [
          // { type: 'all', name: '全部' },
          {
            type: "record_type",
            name: "跟进记录"
          },
          {
            type: "log",
            name: "日志"
          },
          {
            type: "examine",
            name: "审批"
          },
          {
            type: "task",
            name: "任务"
          },
          {
            type: "schedule",
            name: "日程"
          },
          // { type: "deputy_type", name: "待办记录" },
        ],
      };
    },
    computed: {
      componentsName() {
        if (this.logType == "record_type" || this.logType == "deputy_type") {
          return "RecordLog";
        } else if (this.logType == "log") {
          return "JournalLog";
        } else if (this.logType == "examine") {
          return "ExamineLog";
        } else if (this.logType == "task") {
          return "TaskLog";
        } else if (this.logType == "schedule") {
          return "ScheduleLog";
        }
        return "";
      },
    },
    mounted() {},
    methods: {
      /** 发布 时候的类型选择 */
      handleTypeDrop(command) {
        this.followType = command;
      },
      logTabsClick(item, index) {
        this.logType = item.type;
        if (item.type == "deputy_type") {
          this.getFollowDeputyType();
        } else {
          this.getFollowLogType();
        }
      },
      /** 告诉mixad 返回数据 */
      sendInfo() {
        this.$refs.mixadd.$emit("submit-info");
      },
      /** 快捷添加框内 返回的数据用于上传 */
      submitInfo(data) {
        if (this.is_event && !this.next_time) {
          this.$message.error("请选择下次联系时间");
          return;
        }
        var params = {};
        params.types = "crm_" + this.crmType;
        params.types_id = this.id;
        params.content = data.content;
        params.category = this.followType;
        var image_ids = data.images.map(function (element, index, array) {
          return element.file_id;
        });
        var files_ids = data.files.map(function (element, index, array) {
          return element.file_id;
        });
        // var business_ids = data.business.map(function(element, index, array) {
        //   return element.business_id
        // })
        // var contacts_ids = data.contacts.map(function(element, index, array) {
        //   return element.contacts_id
        // })
        params.file_id = image_ids.concat(files_ids);
        // params.business_ids = business_ids
        // params.contacts_ids = contacts_ids
        if (this.next_time) {
          params.is_event = this.is_event ? 1 : 0;
          params.next_time = formatTimeToTimestamp(this.next_time);
        }

        this.sendLoading = true;
        if (this.logType == "deputy_type") {
          params.type = "deputy_type";
          crmPostDeputy(params)
            .then((res) => {
              this.$message.success(res.data);
              // 重置页面
              this.$refs.mixadd.resetInfo();
              this.is_event = false;
              this.next_time = "";
              // 刷新数据
              this.$bus.emit("follow-log-refresh", {
                type: "record-log"
              });
            })
            .finally(() => {
              this.sendLoading = false;
            });
        } else {
          crmRecordSave(params)
            .then((res) => {
              this.$message.success(res.data);
              // 重置页面
              this.$refs.mixadd.resetInfo();
              this.is_event = false;
              this.next_time = "";
              // 刷新数据
              this.$bus.emit("follow-log-refresh", {
                type: "record-log"
              });
            })
            .finally(() => {
              this.sendLoading = false;
            });
        }
      },
    },
  };

</script>

<style lang="scss" scoped>
  @import "../../styles/followlog.scss";

</style>
